<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml"
	xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>商家管理后台</title>
<link rel="stylesheet" th:href="@{/css/layui/css/layui.css}" />
<link rel="stylesheet" th:href="@{/css/login.css}" />
<link rel="stylesheet" th:href="@{/css/layui/icon/iconfont.css}">
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
</head>
<body style="width: 100%">
	<table class="table" id="getGoods">
		<caption>
			<button type="button" class="btn btn-info" data-toggle="modal"
				data-target="#addGood">添加商品</button>
			<button type="button" class="btn btn-primary" data-toggle="modal"
				data-target="#addType">添加类型</button>
		</caption>
		<thead>
			<tr>
				<th>序号</th>
				<th>商品中文名</th>
				<th>商品英文名</th>
				<th>商品日文名</th>
				<th>商品韩文名</th>
				<th>类型</th>
				<th>介绍</th>
				<th>库存</th>
				<th>价格</th>
				<th>是否上架</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-if="goods == null">
				<td rowspan="9">暂无数据</td>
			</tr>
			<tr v-else-if="goods.length <= 0">
				<td rowspan="9">暂无数据</td>
			</tr>
			<tr v-else v-for="(g, index) in goods">
				<td>{{index + 1}}</td>
				<td class=input_name>{{g.g_name}}</td>
				<td class=input_name>{{g.g_name_en}}</td>
				<td class=input_name>{{g.g_name_jp}}</td>
				<td class=input_name>{{g.g_name_ko}}</td>
				<td>{{g.t_name}}</td>
				<td>{{g.g_con}}</td>
				<td>{{g.g_num}}</td>
				<td>{{g.g_price}}</td>
				<td v-if="g.g_state == 0" style="color: green">已上架</td>
				<td v-if="g.g_state == 1" style="color: red">已下架</td>
				<td>
					<button class="btn btn-info" v-if="g.g_state == 1">上架</button>
					<button class="btn btn-danger" v-if="g.g_state == 0">下架</button>
					<button class="btn btn-primary" v-if="g.g_state == 1">修改</button>
				</td>
			</tr>
		</tbody>
	</table>
	<!--添加商品-->
	<div class="modal fade" id="addGood" tabindex="-1" role="dialog"
		aria-labelledby="myModalGood" aria-hidden="true">
		<div class="modal-dialog" id="modelTypes">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalGood">添加商品</h4>
				</div>
				<div class="modal-body"
					style="padding-left: 30px; padding-right: 30px">
					<form class="form-horizontal">
						<div class="form-group">
							<label>商品中文名称:</label> <input type="text"
								class="form-control g_name" v-on:blur="fy()"
								placeholder="请输入商品中文名称" />
						</div>
						<div class="form-group">
							<label>商品英文名称:</label> <input type="text"
								class="form-control g_name_en" v-on:blur="fy()" placeholder="请输入商品英文名称" />
						</div>
						<div class="form-group">
							<label>商品日文名称:</label> <input type="text"
								class="form-control g_name_jp" v-on:blur="fy()" placeholder="请输入商品英文名称" />
						</div>
						<div class="form-group">
							<label>商品韩文名称:</label> <input type="text"
								class="form-control g_name_ko" v-on:blur="fy()" placeholder="请输入商品英文名称" />
						</div>
						<div class="form-group">
							<label>商品介绍:</label> <input type="text"
								class="form-control g_con" placeholder="请输入商品介绍" />
						</div>
						<div class="form-group">
							<label>商品价格:</label> <input type="number"
								class="form-control g_price" placeholder="请输入商品价格" />
						</div>
						<div class="form-group">
							<label>商品库存:</label> <input type="number"
								class="form-control g_num" placeholder="请输入商品库存" />
						</div>
						<div class="form-group">
							<label>是否上架:</label>
							<div class="radio-inline">
								<label> <input type="radio" name="optionsRadios"
									class="g_state" id="optionsRadios1" value="0" checked>
									上架
								</label>
							</div>
							<div class="radio-inline">
								<label> <input type="radio" name="optionsRadios"
									class="g_state" id="optionsRadios2" value="1"> 下架
								</label>
							</div>
						</div>
						<div class="form-group">
							<label>商品类型:</label> <select v-if="types == null"
								class="form-control">
								<option>无类型，请添加</option>
							</select> <select v-else class="form-control g_type">
								<option v-for="t in types" :value="t.id">{{t.t_name}}</option>
							</select>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary"
						v-on:click="addGoods()">提交更改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!--添加商品类型-->
	<div class="modal fade" id="addType" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" id="modelTypes2">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">添加类型</h4>
				</div>
				<div class="modal-body">
					<label>类型名称:</label> <input type="text" class="form-control t_name"
						placeholder="请输入商品类型名称" />
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary"
						v-on:click="addTypes()">提交更改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

	<script th:src="@{/js/jquery.min.js}"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
	<script
		src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script>
    var seaGood = new Vue({
        el: "#getGoods",
        data: {
            goods: null,
            cookie_num: 0,
            g_map: new Map()
        },
        mounted() { //页面加载后执行
            var good = this;
            good.goodsInit();
        },
        methods:{
            goodsInit: function () {
                var good = this;
                $.ajax({
                    url: "/getGoods",
                    type: "POST",
                    data: JSON.stringify({"world_type": "all","page": "goods"}),
                    contentType: 'application/json',
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.code == 0) {
                            good.goods = data.message
                            types.types = data.types
                        }
                        if (data.code == -1) {
                            good.g_map.clear();
                        }
                        if (data.cookie != null) {
                            car_cookie.g_cookie = data.cookie;
                            car_num.goods_num = data.cookie.length;
                            var d = data.cookie;
                            var price = 0;
                            for (var i = 0; i < d.length; i++) {
                                price += parseFloat(d[i].g_price) * d[i].cookie_num;
                                good.g_map.set(d[i].id, d[i].cookie_num)
                            }
                            car_num.g_price = price;
                        }
                    }
                });
            }
        }
    });
    var types = new Vue({
        el: "#modelTypes",
        data: {
            types: null
        },
        methods:{
            // 自动翻译
            fy:function(){
            	$.ajax({
                	url: "/fy",
                	type: "GET",
                	data : {
        				name : $(".g_name_en").val()
        				
        			},
                    dataType: "json",
                    success: function (data){
                    	console.log(data);
                    	$(".g_name").val(data.zh);
                    	$(".g_name_en").val(data.en);
                    	$(".g_name_jp").val(data.jp);
                    	$(".g_name_ko").val(data.ko);
                    }
                });
            },
        	// 添加商品
            addGoods:function () {
                var g_name = $(".g_name").val();
	            var g_name_en = $(".g_name_en").val();
	            var g_name_jp = $(".g_name_jp").val();
	            var g_name_ko = $(".g_name_ko").val();
                var g_con = $(".g_con").val();
                var g_price = $(".g_price").val();
                var g_num = $(".g_num").val();
                var g_state = $(".g_state:checked").val();
                var g_type = $(".g_type").val();
                if(g_name.trim() == "" || g_name_en.trim() == "" || g_con.trim() == "" || g_price.trim() == "" || g_num.trim() == "" || g_state.trim() == "" || g_type.trim() == ""){
                    alert("必填项不可为空");
                    return;
                }
               
                
                var json = {"g_name": g_name,"g_name_en": g_name_en,"g_name_jp": g_name_jp, "g_name_ko":g_name_ko, "g_con": g_con,"g_price": g_price,"g_num": g_num,
                    "g_state": g_state,"g_type": g_type};
                $.ajax({
                    url: "/addGoods",
                    type: "POST",
                    data: JSON.stringify(json),
                    contentType: 'application/json',
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if(data.code == 0){
                            $('#addGood').modal('hide');
                            seaGood.goodsInit();
                        }else{
                            alert("添加失败");
                        }
                    }
                });
            },
            
        }
    });
    var types2 = new Vue({
        el: "#modelTypes2",
        data: {
            types: null
        },
        methods:{
        	//添加类型
            addTypes:function () {
                var t_name = $(".t_name").val();
                if(t_name.trim() == ""){
                    alert("必填项不可为空");
                    return;
                }
                var json = {"t_name": t_name};
                $.ajax({
                    url: "/addTypes",
                    type: "POST",
                    data: JSON.stringify(json),
                    contentType: 'application/json',
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if(data.code == 0){
                            $('#addType').modal('hide');
                            seaGood.goodsInit();
                        }else{
                            alert("添加失败");
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>